<template>
  <div class="sales-container" ref="chartRef"></div>
</template>

<script lang="ts">
export default {
  name: "SalesVisitedChart",
};
</script>

<script lang="ts" setup>
import * as echarts from "echarts";
import { ref, watch } from "vue";
const chartRef = ref();

const props = defineProps<{
  data: number[];
  dataAxis: string[];
  salesVisitedTab: string;
}>();

let myEcharts: any = null;

watch(
  () => props.data,
  () => {
    if (!myEcharts) {
      myEcharts = echarts.init(chartRef.value);
      const option = {
        title: {
          text: "销售趋势",
          textStyle: {
            fontSize: 14,
          },
        },
        xAxis: {
          data: props.dataAxis,
        },
        yAxis: {},
        series: {
          type: "bar",
          data: props.data,
          itemStyle: {
            color: "#3398db",
          },
          barWidth: 50,
        },
        grid: {
          right: 0,
          left: 0,
          bottom: 30,
          containLabel: true,
        },
        tooltip: {},
      };
      myEcharts.setOption(option);
      return;
    }
    myEcharts.setOption({
      title: {
        text: `${props.salesVisitedTab === "sales" ? "销售" : "访问"}` + "趋势",
        textStyle: {
          fontSize: 14,
        },
      },
      xAxis: {
        data: props.dataAxis,
      },
      yAxis: {},
      series: {
        type: "bar",
        data: props.data,
        itemStyle: {
          color: "#3398db",
        },
        barWidth: 50,
      },
      grid: {
        right: 0,
        left: 0,
        bottom: 30,
        containLabel: true,
      },
      tooltip: {},
    });
  }
);
</script>

<style scoped>
.sales-container {
  height: 300px;
}
</style>
